 <template>
    <div class="modal-wrapper" v-if="mdlShowSub">
    <div class="elMenu-bg"></div>

<div class="mdl-wrap">
    <div class="top-box">
              <img class="notify-img" src="@/assets/images/mdl_01.png">
    </div>

    <div class="bottom-box">
        <span class="dian-01"></span>
        <span class="dian-02"></span>

        <!-- <p class="title-01">{{$data.}}</p> -->
        <p class="title-01">恭喜您</p>
        <p class="title-02">商品兑换成功</p>
    </div>

    <div class="close-box">
        <span class="custom-hr"></span>
        <i @click="mdlClose(false)" class="icon iconfont icon-guanbi2"></i>
    </div>

</div>
 
    </div>
 </template>
 
 <script type="text/ecmascript-6">
 export default {
    name: 'modal',
    data() {
        return {
        }
    },
    props:{
        mdlShowSub:{
            type:Boolean,
            default:false
        }
    },
   components: {},
   methods:{
       mdlClose(val){
        //    this.mdlShowSub=val
           this.$emit('emtMdlClose',val);
       },
        mdlClose2(val){
            alert(val);
        //    this.mdlShowSub=val
       }
   }
  
 }
 </script>
 
 <style scoped lang="scss">
 .elMenu-bg {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  top: 0;
  right: 0;
  z-index:$zindex-3;
}

.mdl-wrap{
    width:5.94rem;
    @extend .cmm-translateX;
    top:3.4rem;
  z-index:$zindex-4;
  overflow:hidden;

    .top-box{
        width:100%;
        .notify-img{
width:100%;
        }
    }
    .bottom-box{
        height:2.76rem;
        width:100%;
        background-color:$c-white-light;
        text-align:center;
    padding-top: 0.26rem;
    position:relative;
    border-radius:0.2rem;

.dian-01,
.dian-02{
    position:absolute;
            top:0;
              background-color: rgba(0, 0, 0, 0.7);
              display:inline-block;
              width:0.34rem;
              height:0.34rem;
              border-radius:100%;
}

        .dian-01{
            transform:translateX(-50%) translateY(-50%);
            left:0;
           
        }
        .dian-02{
            right:0;
            transform:translateX(50%) translateY(-50%);
        }


.title-01{
font-size:0.48rem;
color:$c-mainC;
text-align:center;
    margin: 0.30rem auto 0.2rem;

}
.title-02{
    width: 4.32rem;
    border-radius: 0.8rem;
    font-size: 0.42rem;
    font-weight: normal;
    color: $c-white-light;
    $letHeight: 0.82rem;
    height: $letHeight;
    line-height: $letHeight;
    text-align: center;
    margin: 0.30rem auto;
    display: inline-block;

   background-color: #FA7242 !important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FA7242", endColorstr="#FE4934");
background-image: -moz-linear-gradient(left, #FA7242, #FE4934);
background-image: -ms-linear-gradient(left, #FA7242, #FE4934);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FA7242), color-stop(100%, #FE4934));

background-image: -webkit-linear-gradient(left, #FA7242, #FE4934);
background-image: -o-linear-gradient(left, #FA7242, #FE4934);
background-image: linear-gradient(#FA7242, #FE4934);

}
    }
}

.close-box{
position:relative;
height:1.24rem;

    .custom-hr{
    @extend .cmm-translateX;
    left:50%;
    border-right:0.02rem solid $c-white-light;
    height:0.36rem;
    display:inline-block;


    }

  .icon {
    color: $c-white-light;
    @extend .cmm-translateX;
    font-size: 0.8rem;
    left:50%;
    top:0.30rem;
  }
}


 </style>
 